<template>
    <!-- pages/selectcover/index.wxml -->
    <view class="page-warp">
        <radio-group @change="onChange">
            <block v-for="(item, index) in imgList" :key="index">
                <view class="item-img" :data-id="item.id" @tap.stop.prevent="onClick">
                    <image :src="item.url" mode="aspectFit" style="width: 100%; height: 220rpx"></image>
                    <radio :value="item.id" :checked="radio == item.id" />
                </view>
            </block>
        </radio-group>
        <button class="btn-save bg-orange text-center text-lg radiues margin-lg" @tap="onSave">保存</button>
    </view>
</template>

<script>
// pages/selectcover/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            radio: '',
            imgList: [],
            coverId: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        _request
            .get('/storeCenterInfo/coverImgList', {})
            .then((res) => {
                if (res.data.code === 200) {
                    this.setData({
                        imgList: res.data.data || []
                    });
                } else {
                    uni.showToast({
                        title: res.data.message || '底图获取失败!',
                        icon: 'none',
                        duration: 2000
                    });
                }
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onChange(event) {
            // this.setData({
            //   radio: event.detail,
            // });
        },

        onClick(event) {
            const id = event.currentTarget.dataset.id; // console.log(event, id)

            this.setData({
                radio: id
            });
        },

        onSave() {
            let that = this;

            if (!this.radio) {
                uni.showToast({
                    title: '请选择底图',
                    icon: 'none'
                });
                return;
            }

            let pages = getCurrentPages();

            if (pages.length > 1) {
                let prevPage = pages[pages.length - 2];
                prevPage.setData({
                    coverId: that.radio
                });
                prevPage.btnPre();
            }

            uni.navigateBack({
                delta: 0
            });
        }
    }
};
</script>
<style>
/* pages/selectcover/index.wxss */
radio-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 84vh;
    overflow-y: scroll;
}
.item-img {
    width: calc(calc(100% / 3) - 20rpx);
    margin: 10rpx;
    height: 230rpx;
    box-sizing: border-box;
    position: relative;
}
radio {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
}
</style>
